<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>业务监控图</title>
    <meta name="description" content=""/>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/layer/layer.js"></script>
    <script src="js/go.js"></script>
    <script src="js/flow-desinger.js"></script>
    <script src="js/flow-display.js"></script>
    <script src="js/api.js"></script>
</head>

<body>
<div id="header">
    <i class="fas fa-chart-line"></i> 监控图
</div>
<div style="height: 50px;"></div>

<div id="sidebar">
    <h2>监控场景列表</h2>
    <ul id="sceneList" style="cursor:pointer;">
        <!-- 场景列表将被插入到这里 -->
    </ul>
</div>

<div id="container">
    <div>
        <h1>监控地图</h1>
        <div id="monitorDisplayPanel"></div>
        <button id="update">更新流程图</button>
    </div>

    <div>
        <h1>监控数据</h1>
        <form id="searchForm">
            <label for="monitorId">监控ID:</label>
            <input type="text" id="monitorId" name="monitorId">
            <label for="monitorName">监控名称:</label>
            <input type="text" id="monitorName" name="monitorName">
            <label for="monitorNodeId">节点ID:</label>
            <input type="text" id="monitorNodeId" name="monitorNodeId">
            <button type="submit">搜索</button>
        </form>
        <table id="dataTable">
            <thead>
            <tr>
                <th>监控ID</th>
                <th>监控名称</th>
                <th>节点ID</th>
                <th>系统名称</th>
                <th>类的名称</th>
                <th>方法名称</th>
                <th>属性名称</th>
                <th>属性字段</th>
                <th>属性的值</th>
            </tr>
            </thead>
            <tbody>
            <!-- 数据行将被插入到这里 -->
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    var monitorFlow = new FlowDesigner('monitorDisplayPanel');

    document.addEventListener('DOMContentLoaded', function() {
        // 查询侧边栏
        fetchSceneList();

        // 获取当前页面的 URL
        var currentUrl = new URL(window.location.href);
        // 从 URL 中提取 monitorId 参数
        var monitorId = currentUrl.searchParams.get('monitorId');

        if (!monitorId) {
            console.error('monitorId 参数未找到');
            return;
        }

        // Initial fetch
        fetchData(monitorId);

        // Set interval to fetch data every 5 seconds
        setInterval(() => fetchData(monitorId), 5000);

        // Fetch initial monitor data
        fetchMonitorData(monitorId);

        // Add event listener for the search form
        document.getElementById('searchForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const monitorId = document.getElementById('monitorId').value;
            const monitorName = document.getElementById('monitorName').value;
            const monitorNodeId = document.getElementById('monitorNodeId').value;

            fetchMonitorData(monitorId, monitorName, monitorNodeId);
        });

        document.getElementById('update').addEventListener('click', function(event) {
            window.open("update.html?monitorId=" + monitorId, '_blank');
        });
    });

    async function fetchData(monitorId) {
        try {
            const data = await MonitorAPI.queryMonitorFlowMap(monitorId);
            monitorFlow.displayFlow(data);
        } catch (error) {
            console.error('获取流程图数据失败:', error);
        }
    }

    async function fetchSceneList() {
        try {
            const sceneList = await MonitorAPI.queryMonitorSceneList();
            const sceneListElement = document.getElementById('sceneList');
            sceneListElement.innerHTML = '';
            sceneList.forEach(item => {
                const listItem = document.createElement('li');
                listItem.innerText = item.monitorName;
                listItem.dataset.monitorId = item.monitorId;
                listItem.addEventListener('click', function() {
                    window.location.assign(`index.html?monitorId=${this.dataset.monitorId}`);
                });
                sceneListElement.appendChild(listItem);
            });
        } catch (error) {
            console.error('获取场景列表失败:', error);
        }
    }

    async function fetchMonitorData(monitorId, monitorName = '', monitorNodeId = '') {
        try {
            const data = await MonitorAPI.queryMonitorDataList(monitorId, monitorName, monitorNodeId);
            const tableBody = document.getElementById('dataTable').getElementsByTagName('tbody')[0];
            tableBody.innerHTML = '';
            data.forEach(item => {
                const row = tableBody.insertRow();
                row.insertCell(0).innerText = item.monitorId;
                row.insertCell(1).innerText = item.monitorName;
                row.insertCell(2).innerText = item.monitorNodeId;
                row.insertCell(3).innerText = item.systemName;
                row.insertCell(4).innerText = item.clazzName;
                row.insertCell(5).innerText = item.methodName;
                row.insertCell(6).innerText = item.attributeName;
                row.insertCell(7).innerText = item.attributeField;
                row.insertCell(8).innerText = item.attributeValue;
            });
        } catch (error) {
            alert('查询失败，请检查网络连接或联系管理员。');
        }
    }
</script>

</body>

</html>